<template>
    <div class="container">
      <h3 class="courseHeader">班级课程</h3>
      <ul class="lesson-list">
        <li v-for="(lesson, index) in lessons" :key="index" class="lesson-list-item">
          {{ lesson }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import http from '../../http/index.js'
  export default {
    name: "ClassroomCourse",
    props: {
      classroomId: String,
    },
    data() {
      return {
        lessons: [
          /*{ title: "Spark简介及发展历史介绍" },
          { title: "Spark的特点" },
          { title: "Spark生态圈" },
          { title: "搭建单机版Spark环境并运行Pi实例" },
          { title: "搭建完全分布式环境及启动、关闭、监控集群" },
          { title: "Spark架构" },
          { title: "Spark核心数据集RDD" },
          { title: "从内存中已有数据创建RDD-Parallelize()方法" },
          { title: "使用map()转换数据" },
          { title: "使用Collect()查询" },
          { title: "使用union()合并多个RDD" },*/
        ],
      };
    },
    methods: {
      fetchLessons() {
        http({
          method: 'get',
          url: '/api/classroom/course',
          params: {
            classroomId: this.classroomId
          }
        }).then(res => {
          if (Array.isArray(res) && res.length > 0) {
            this.lessons = res;
          }
          }).catch(error => {
            console.error(error);
          });
      },
    },
    mounted() {
      this.fetchLessons();
    }
  };
  </script>
  
  <style scoped>
  .container {
    margin: 20px;
    height: 400px; 
    background-color: #f0f0f0; 
  }
  .courseHeader {
    background-color: #409eff;
    color: white;
    padding: 10px 20px;
    margin: 0;
    font-family: "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif; 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
    border-bottom: 3px solid #307AFF; 
  }
  
  .lesson-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    height: 365px;
    width: auto;
    border: 3px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0px, 0px, 10px, rgba(0, 0, 0, 0.1);
  }
  
  .lesson-list-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    font-family: "Courier New", "Courier", "monospace";
    text-align: center;
    line-height: 1.2;
  }
  
  .lesson-list-item:last-child {
    border-bottom: none;
  }
  </style>

